Cara Mudah Membuat Judul / Heading di HTML ( Tag h1, h2, h3, h4, h5 dan h6 )

     
AtehaSchool - Cara Mudah Membuat Judul / Heading HTML ( Tag h1, h2, h3, h4, h5 dan h6 ). Membuat judul / heading pada HTML merupakan hal yang harus diperhatikan oleh setiap desainer web (web designer). Tag heading memiliki enam tingkatan yang meliputi tag h1, h2, h3, h4, h5 dan h6. Masing-masing tag heading ini memiliki suatu perbedaan fungsi tersendiri.

Penggunaan tag heading html pada setiap halaman untuk tag h1 tidak boleh melebihi dari satu. Selain itu , untuk tag h2 sampai h6 boleh digunakan lebih dari satu pada setiap halaman web. Tag h1 adalah elemen yang digunakan untuk mendefinisikan judul yang peling penting pada halaman web.

Sehingga penggunaan tag h1 pada setiap halaman yang lebih dari satu dapat menyebabkan mesin pencari akan kesulitan menentukan judul mana yang lebih penting dan diutamakan. Berbeda halnya dengan tag h2 sampai h6 yang diangggap tidak lebih penting dari tag h1.

Membuat Judul / Heading HTML
Menulis stuktur tag html harus diperhatikan keteraturan susunan kodenya, pada setiap tag pembuka harus dilengkapi dengan tag penutup. Berikut ini cara membuat struktur judul / heading tag h1 - h6 di html.

<!DOCTYPE html>
<html>
<head>
<title>Contoh Membuat Judul / Heading Tag h1 - h6 </title>
</head>
<body>

<h1>Ini merupakan judul / heading dengan tag h1</h1>
<h2>Ini merupakan judul / heading dengan tag h2</h2>
<h3>Ini merupakan judul / heading dengan tag h3</h3>
<h4>Ini merupakan judul / heading dengan tag h4</h4>
<h5>Ini merupakan judul / heading dengan tag h5</h5>
<h6>Ini merupakan judul / heading dengan tag h6</h6>

</body>
</html> 

  Berikut ini merupakan tampilan halaman konten heading html yang telah diterjemahkan oleh browser.


Setelah membuat judul / heading tag h1 sampai  tag h6, kita perlu mencoba cara menambahkan paragarap dengan mengunakan tag <p> di html.
Label:

Mengenal Pengertian, Kegunaan dan Cara Menulis Struktur HTML

     
AtehaSchool - Pengertian dan Kegunaan HTML. Sebagai pemula web programer atau desain web / blog tentu  sangat membutuhkan penjelasan dari pengertian HTML dan kegunaannya. Cara menjadi web programer yang handal dan mahir tentunya harus mempelajari bahasa HTML secara bertahap dan teratur.

Untuk itu, Anda sebagai pemula tidak perlu merasa khawatir dalam mempelajari fungsi dan pengertian  HTML. Dalam artikel ini AtehaSchool akan membantu mengulas Pengertian dan Kegunaan HTML serta mengenalkan tag-tag HTML secara lengkap.

Apa itu yang dimaksud dengan HTML ? HTML atau singkatan dari Hyper Text Markup Language merupakan bahasa markah yang digunakan sebagai pemrograman web, yakni untuk menampilkan isi informasi  halaman web browser. Pada dasarnya stuktur tag HTML tidak bisa ditampilkan oleh browser melainkan hanya digunakan oleh browser untuk menampilkan sebuah halaman web.

 Srtuktur Tag HTML
Tag HTML merupakan sebuah nama elemen yang diapit oleh sudut kurung. Cara penulisan stuktur tag  HTML harus berpasangan dengan tag yang sama, namun  pada tag akhir ditambah dengan tanda penutup garis miring atau Forward Slash ( / ), seperti contoh  :

  1. Tag awal  <html> berpasangan dengan tag akhir </html> 
  2. Tag awal <head> berpasangan dengan tag akhir </head> 
  3. Tag awal  <title>berpasangan dengan tag akhir </title> 
  4. Tag awal  <body> berpasangan dengan tag akhir </body> 
  5. Tag awal <h1>  berpasangan dengan tag akhir </h1> 
  6. Tag awal <h2> berpasangan dengan tag akhir </h2> 
  7. Tag awal  <p> berpasangan dengan tag akhir </p> dan seterusnya.

Menulis Bentuk Struktur Tag HTML
Tag HTML dapat kita tulis menggunakan aplikasi Notepad (Windows) atau TextEdit (Mac). Sebagai tahap pembelajaran dua aplikasi ringan bawaan Windows ( Notepad ) atau TextEdit (Sistem operasi bawaan Mac) memang cocok untuk digunakan.

Langkah membuka Aplikasi TextEdit pada Mac :
  1. Buka Finder → Applications → TextEdit  
  2. Kemudian ubah preferensi agar aplikasi dapat melakukan penyimpanan file dengan benar pada menu Preferences → Format → pilih "Plain Text" 
  3. Setelah itu  beri tanda centang kotak  "Ignore rich text commands in HTML files" yang berada dibawah menu OPEN dan SAVE 
  4.  Selanjutnya buka New Document untuk menempatkan kode HTML yang akan dibuat.
Langkah membuka Aplikasi NOTEPAD pada operasi Windows 7, 8, maupun versi windows terbaru :

Untuk pengguna Windows 8 atau versi yang lebih baru:

Buka Start Screen (simbol jendela di bagian kiri bawah pada layar Anda) kemudian Ketik Notepad.

Untuk pengguna Windows 7 atau versi dibawahnya :

Buka Start → Programs → Accessories  →  Notepad.

Dalam artikel ini kita akan ambil contoh cara menulis struktur tag HTML menggunakan Notepad sebagai berikut.

 <!DOCTYPE html>
<html>
    <head>
        <title>Judul Halaman Web</title>
    </head>
    <body>

       <h1>Mencoba Cara Menulis Kalimat Dalam HTML Tag h1</h1>
      <p>Latihan HTML paragrap.</p>

    </body>
</html>  
 Kemudian simpan file html tersebut pada folder komputer yang telah ditentukan.

Cara Menyimpan File HTML
Pada menu Notepad yang terletak di pojok kiri atas pilih FILE → SAVE AS  kemudian berikan nama file dengan Ektensi HTML atau HTM , selanjutnya dalam kotak  SAVE AS TYPE ubah menjadi ALL FILES.
Perhatikan pada gambar di bawah ini.


 Membuka File HTML pada Browser
Untuk membuka file HTML tersebut sangat mudah hanya menge KLIK 2 KALI pada nama file, atau dengan cara Pilih FIle KLIK KANAN → Open with → Google Chrome (Pilih nama browser sesuai selera anda ).

 Halaman web yang ditampilkan oleh browser seperti pada gambar dibawah ini


Penjelasan elemen kode  HTML diatas adalah sebagai berikut  
  1. Deklarasi <!DOCTYPE html> berfungsi untuk mendefinisikan dokumen menjadi HTML5, jenis deklarasi <!DOCTYPE html> ini tidak sensitif huruf (tidak membedakan huruf besar dan kecil) sehingga halaman web dapat ditampilkan pada browser dengan sempurna.
  2. Tag <html> merupakan sebuah elemen untuk root  dari halaman HTML
  3. Tag <head> berfungsi untuk menyimpan informasi meta tag tentang dokumen.
  4. Tag <title> berfungsi untuk menentukan nama judul setiap halaman web.
  5. Elemen Tag <body> berisi kode untuk menampilkan konten pada browser agar terbentuk sebuah halaman web.
  6. Elemen Tag <h1>  untuk mendefinisikan judul besar atau judul posting yang paling penting.
  7. Elemen Tag <p> untuk mendefinisikan sebuah paragrap pada halaman web.
Catatan : Untuk lebih mudah mengedit HTML dasar selain menggunakan aplikasi Notepad bawaan windows, kita dapat menggunakan aplikasi yang lebih optimal yaitu NOTEPAD++.
Label: